<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米官网-轮播图</title>
    <link rel="stylesheet" href="demo.css">
    <style>
    </style>
</head>

<body>

    <div id="banner">
        <div class="img-wrap">
            <ul>
                <li class="item" style="display:block">
                    <img src="xm1.jpg" width="1226px" height="460px" alt="">
                </li>
                <li class="item">
                    <img src="xm2.jpg" width="1226px" height="460px" alt="">
                </li>
                <li class="item">
                    <img src="xm3.jpg" width="1226px" height="460px" alt="">
                </li>
                <li class="item">
                    <img src="xm4.jpg" width="1226px" height="460px" alt="">
                </li>
                <li class="item">
                    <img src="xm5.jpg" width="1226px" height="460px" alt="">
                </li>
            </ul>
        </div>

        <div class="lr-tab">
            <img src="zuo.png" alt="" class="zuo-btn">
            <img src="you.png" alt="" class="you-btn">
        </div>

        <div class="tab-btn">
            <ul>
                <li class="btn active"></li>
                <li class="btn"></li>
                <li class="btn"></li>
                <li class="btn"></li>
                <li class="btn"></li>
            </ul>
        </div>
    </div>

    <script src="jquery-3.3.1.js"></script>
    <script>
        window.alert(navigator.userAgent)
        var index = 0;//初始话一个变量 指向下标


        $(".tab-btn .btn").click(function () {
            index = $(this).index();//获取点击元素的下标
            $(this).addClass("active").siblings().removeClass("active");
            $(".item").eq(index).fadeIn().siblings().fadeOut();
            //eq方法 找到第 下标 个图片，让他淡入,
            //同时为了避免每张图片只能点击一次，所以找到其他图片，让他们淡出

            // alert(index);
        });//通过点击事件 点击到小按钮
        //siblings().  当我们点击给他添加样式的时候，
        //找到除了点击以外的其他的兄弟元素，删除他的class名字

        $(".lr-tab .you-btn").click(function () {
            index++;//下标变大
            if (index > 4) {
                index = 0;
            }
            $(".item").eq(index).fadeIn().siblings().fadeOut();
            //找到图片，找到现在index指向的那张图片，让他淡入，并将其他的图片淡出
            $(".tab-btn .btn").eq(index).addClass("active").siblings().removeClass("active");
            //这里和之前类似，找到当前下标的按钮，给他添加显示样式，给其他兄弟移除样式。
        });//通过点击事件 点击到小按钮
        //siblings().  当我们点击给他添加样式的时候，
        //找到除了点击以外的其他的兄弟元素，删除他的class名字

        $(".lr-tab .zuo-btn").click(function () {
            index--;
            if (index < 0) {
                index = 4;
            }
            $(".item").eq(index).fadeIn().siblings().fadeOut();
            //找到图片，找到现在index指向的那张图片，让他淡入，并将其他的图片淡出
            $(".tab-btn .btn").eq(index).addClass("active").siblings().removeClass("active");
            //这里和之前类似，找到当前下标的按钮，给他添加显示样式，给其他兄弟移除样式。
        });//通过点击事件 点击到小按钮
        //siblings().  当我们点击给他添加样式的时候，
        //找到除了点击以外的其他的兄弟元素，删除他的class名字

        var timer = setInterval(function () {
            index++;//下标变大
            if (index > 4) {
                index = 0;
            }
            $(".item").eq(index).fadeIn().siblings().fadeOut();
            //找到图片，找到现在index指向的那张图片，让他淡入，并将其他的图片淡出
            $(".tab-btn .btn").eq(index).addClass("active").siblings().removeClass("active");
            //这里和之前类似，找到当前下标的按钮，给他添加显示样式，给其他兄弟移除样式。
            //通过点击事件 点击到小按钮
        //siblings().  当我们点击给他添加样式的时候，
        //找到除了点击以外的其他的兄弟元素，删除他的class名字
        }, 3000);//定时器
    </script>
</body>

</html>